iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
Modern Web

從零開始的JS學習之路系列 第 7

[Day07] 賦值運算子、逗號運算子、邏輯運算子筆記

  • 分享至 

  • xImage
  •  

賦值運算子(Assignment operators)

在 Javascript 裡運算有遞增的寫法 ++、遞減的寫法 --

var a = 10;
a ++; // a = a + 1

透過 = 把右側的運算式指派(assign)至等號左側的變數 a。
一般比較常用到的四則運算,再來看看 MDN 其他賦值運算子的寫法。

名稱 簡化的運算子 意義
賦值 x = y x = y
加法賦值 x += y x = x + y
減法賦值 x -= y x = x - y
乘法賦值 x *= y x = x * y
除法賦值 x /= y x = x / y
餘數賦值 x %= y x = x % y
指數賦值 x **= y x = x ** y
左移賦值 x <<= y x = x << y
右移賦值 x >>= y x = x >> y
無號右移賦值 x >>>= y x = x >>> y
位元 AND 賦值 x &= y x = x & y
位元 XOR 賦值 x ^= y x = x ^ y
位元 OR 賦值 x |= y x = x | y

逗號運算子(Comma operator)

主要功能在分隔運算式循序執行,由左至右並回傳最後一個運算式的值。
如果需要在一個運算式裡同時包含多組運算式,就可用逗號 , 來分隔。
例如 for 迴圈:

for (i = 0, j = 10; i < 10; i++, j++) {
  k = i + j;
}

透過 , 逗號運算子可以將多組運算式看作是同一個。
或者宣告的時候:

var a = 10;
var b = 10;

可寫成

var a = 10, b =10;

這樣可同時宣告多組變數並給予值。

但要注意的是

var a = b = 10;

是不同的意思,此句拆開來看是

b = 10;
var a = b;

如果不懂正確寫法的含義,會在無意識下寫了一個未宣告的全域變數。
另外發現,在物件、陣列裡也會出現 , 像曾經在 Day04 物件實字 提到舉的例子,是否也算是逗號運算子?後來經過查找 MDN 的敘述及犀牛的舉例,證明不是。MDN CommaOperator Usage notes
Day04 的物件實字

邏輯運算子

這是 JS 跟其他語言比較不一樣的地方,&&|| 可以用短路性質來理解,怎麼說呢?他們在判斷的時候會先檢查左邊的數值。

&&:如果左側可被轉成 false,即回傳運算式 1
||:如果左側可被轉成 true,即回傳運算式 1
console.log( 運算式 1 && 運算式 2 );

簡單來說透過 &&|| 所產生的值不一定會是 Boolean,而是兩者其中之一

var a = 123;
var b = "abc";
var c = null;
var d = undefined;
var e = true;

console.log( a && b ); // "abc",123 被 ToBoolean 轉型 true,故回傳 b
console.log( a || b ); // 123,因為轉成 true 故回傳 a
名稱 用法 解釋
邏輯 AND (&&) 運算式1 && 運算式2 假如 運算式1 可以被轉換成 false的話,回傳 運算式1; 否則,回傳 運算式2。 因此,&&只有在 兩個運算元都是True 時才會回傳 True,否則回傳 false。
邏輯 OR (||) 運算式1 || 運算式2 假如 運算式1 可以被轉換成 true的話,回傳 運算式1; 否則,回傳 運算式2。 因此,||在 兩個運算元有任一個是 True 時就會回傳 True,否則回傳 false。
邏輯 NOT (!) !運算式 假如單一個運算元能被轉換成 True 時,回傳 false,不然回傳 true。

參考資料:
MDN 運算式與運算子
008 天重新認識 JavaScript
胡立-邏輯運算的小撇步:|| 與 && 的短路性質


上一篇
[Day06] 自動轉型
下一篇
[Day08] 流程判斷:if else 與 switch
系列文
從零開始的JS學習之路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
Chiahsuan
iT邦新手 4 級 ‧ 2021-09-22 17:09:22

今天第一次聽到逗號運算子,長知識~/images/emoticon/emoticon12.gif

0
南國安迪
iT邦新手 3 級 ‧ 2021-09-22 17:27:58

今天第一次聽到逗號運算子,長知識~/images/emoticon/emoticon61.gif

0
wendy
iT邦新手 2 級 ‧ 2021-09-22 20:17:58

長知識+1 今天大家還一起認真研究逗號運算子,真有趣

Rex iT邦新手 3 級 ‧ 2021-09-22 21:56:10 檢舉

謝謝隊友,謝謝創世神的時相討論

我要留言

立即登入留言